Tailwind CSS Cheat Sheet

Styling Based on Parent Element State

To style child elements based on the state of a parent element, add the group class to the parent element and then specify group-state:any-class-name for the child elements.

Additionally, you can name the group using the format group/group-name. When nesting groups, use the format group-state/group-name:any-class-name.

To style child elements based on a selector specified for the parent element, specify the class in the format group-[any-selector].

Reference:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

Styling Based on Sibling Element State

To style elements based on the state of a sibling element, add the peer class to the preceding sibling and then specify peer-state:any-class-name for the following sibling (e.g., peer-invalid:bg-red-500).

Additionally, you can name the sibling using the format peer/sibling-name. While "sibling name" might sound odd, it's better than "peer name". When you want to differentiate between multiple siblings, use the format peer-state/sibling-name:any-class-name.

To style child elements based on a selector specified for the preceding sibling, specify the class in the format peer-[any-selector].

Reference:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state

Styling Direct Child Elements

To collectively style direct child elements, use the format *:any-class-name. Note that when this is specified, any classes applied directly to the child elements will not work.

Reference:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-direct-children

Styling Based on the Presence or State of Descendants

To style elements based on the presence or state of descendants, use the format has-[selector]:any-class-name.

Reference:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-descendants

Styling Based on the Presence or State of Group Descendants

To style elements based on whether a group has specific descendants, add the group class to the parent element and specify group-has-[selector]:any-class-name for the target element.

Reference:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-the-descendants-of-a-group

styling Based on the Presence or State of Sibling Descendants

To style elements based on the presence or state of sibling descendants, add the peer class to the preceding sibling and specify peer-has-[selector]:any-class-name for the following sibling.

Reference:
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-the-descendants-of-a-peer

User Action Pseudo-classes and More

Modifier CSS
hover &:hover
focus &:focus
focus-within &:focus-within
focus-visible &:focus-visible
active &:active
visited &:visited
target &:target

Reference:
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

Tree Structure Pseudo-classes and More

Tailwind CSS CSS
* & > *
has &:has
first &:first-child
last &:last-child
only &:only-child
odd &:nth-child(odd)
even &:nth-child(even)
first-of-type &:first-of-type
last-of-type &:last-of-type
only-of-type &:only-of-type
empty &:empty

Reference:
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

Input Pseudo-classes

Tailwind CSS CSS
disabled &:disabled
enabled &:enabled
checked &:checked
indeterminate &:indeterminate
default &:default
required &:required
valid &:valid
invalid &:invalid
in-range &:in-range
out-of-range &:out-of-range
placeholder-shown &:placeholder-shown
autofill &:autofill
read-only &:read-only

Reference:
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

Pseudo-classes

Tailwind CSS CSS
before &::before
after &::after
first-letter &::first-letter
first-line &::first-line
marker &::marker
selection &::selection
file &::file-selector-button
backdrop &::backdrop
placeholder &::placeholder

Reference:
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

Media Queries & Feature Queries

Tailwind CSS CSS
sm @media (min-width: 640px)
md @media (min-width: 768px)
lg @media (min-width: 1024px)
xl @media (min-width: 1280px)
2xl @media (min-width: 1536px)
min-[…] @media (min-width: …)
max-sm @media not all and (min-width: 640px)
max-md @media not all and (min-width: 768px)
max-lg @media not all and (min-width: 1024px)
max-xl @media not all and (min-width: 1280px)
max-2xl @media not all and (min-width: 1536px)
max-[…] @media (max-width: …)
dark @media (prefers-color-scheme: dark)
portrait @media (orientation: portrait)
landscape @media (orientation: landscape)
motion-safe @media (prefers-reduced-motion: no-preference)
motion-reduce @media (prefers-reduced-motion: reduce)
contrast-more @media (prefers-contrast: more)
contrast-less @media (prefers-contrast: less)
print @media print
supports-[…] @supports (…)

Reference:
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

ARIA Attributes and More

Tailwind CSS CSS
aria-checked &[aria-checked=“true”]
aria-disabled &[aria-disabled=“true”]
aria-expanded &[aria-expanded=“true”]
aria-hidden &[aria-hidden=“true”]
aria-pressed &[aria-pressed=“true”]
aria-readonly &[aria-readonly=“true”]
aria-required &[aria-required=“true”]
aria-selected &[aria-selected=“true”]
aria-[…] &[aria-…]
data-[…] &[data-…]
rtl [dir=“rtl”] &
ltr [dir=“ltr”] &
open &[open]

Reference:
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

aspect ratio

Tailwind CSS CSS
aspect-auto aspect-ratio: auto;
aspect-square aspect-ratio: 1 / 1;
aspect-video aspect-ratio: 16 / 9;

Reference:
https://tailwindcss.com/docs/aspect-ratio

container

Tailwind CSS CSS
container None
width: 100%;
sm(640px)
max-width: 640px;
md(768px)
max-width: 768px;
lg(1024px)
max-width: 1024px;
xl(1280px)
max-width: 1280px;
2xl(1536px)
max-width: 1536px;

Reference:
https://tailwindcss.com/docs/container

columns

Tailwind CSS CSS
columns-1 columns: 1;
columns-2 columns: 2;
columns-3 columns: 3;
columns-4 columns: 4;
columns-5 columns: 5;
columns-6 columns: 6;
columns-7 columns: 7;
columns-8 columns: 8;
columns-9 columns: 9;
columns-10 columns: 10;
columns-11 columns: 11;
columns-12 columns: 12;
columns-auto columns: auto;
columns-3xs columns: 16rem; /* 256px */
columns-2xs columns: 18rem; /* 288px */
columns-xs columns: 20rem; /* 320px */
columns-sm columns: 24rem; /* 384px */
columns-md columns: 28rem; /* 448px */
columns-lg columns: 32rem; /* 512px */
columns-xl columns: 36rem; /* 576px */
columns-2xl columns: 42rem; /* 672px */
columns-3xl columns: 48rem; /* 768px */
columns-4xl columns: 56rem; /* 896px */
columns-5xl columns: 64rem; /* 1024px */
columns-6xl columns: 72rem; /* 1152px */
columns-7xl columns: 80rem; /* 1280px */

Reference:
https://tailwindcss.com/docs/columns

break after

Tailwind CSS CSS
break-after-auto break-after: auto;
break-after-avoid break-after: avoid;
break-after-all break-after: all;
break-after-avoid-page break-after: avoid-page;
break-after-page break-after: page;
break-after-left break-after: left;
break-after-right break-after: right;
break-after-column break-after: column;

Reference:
https://tailwindcss.com/docs/break-after

break before

Tailwind CSS CSS
break-before-auto break-before: auto;
break-before-avoid break-before: avoid;
break-before-all break-before: all;
break-before-avoid-page break-before: avoid-page;
break-before-page break-before: page;
break-before-left break-before: left;
break-before-right break-before: right;
break-before-column break-before: column;

Reference:
https://tailwindcss.com/docs/break-before

break inside

Tailwind CSS CSS
break-inside-auto break-inside: auto;
break-inside-avoid break-inside: avoid;
break-inside-avoid-page break-inside: avoid-page;
break-inside-avoid-column break-inside: avoid-column;

Reference:
https://tailwindcss.com/docs/break-inside

box decoration break

Tailwind CSS CSS
box-decoration-clone box-decoration-break: clone;
box-decoration-slice box-decoration-break: slice;

Reference:
https://tailwindcss.com/docs/box-decoration-break

box sizing

Tailwind CSS CSS
box-border box-sizing: border-box;
box-content box-sizing: content-box;

Reference:
https://tailwindcss.com/docs/box-sizing

display

Tailwind CSS CSS
block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
table display: table;
inline-table display: inline-table;
table-caption display: table-caption;
table-cell display: table-cell;
table-column display: table-column;
table-column-group display: table-column-group;
table-footer-group display: table-footer-group;
table-header-group display: table-header-group;
table-row-group display: table-row-group;
table-row display: table-row;
flow-root display: flow-root;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
list-item display: list-item;
hidden display: none;

Reference:
https://tailwindcss.com/docs/display

floats

Tailwind CSS CSS
float-start float: inline-start;
float-end float: inline-end;
float-right float: right;
float-left float: left;
float-none float: none;

Reference:
https://tailwindcss.com/docs/float